<template>
    <div>
        <el-tabs type="border-card" class="main" @tab-click="getList">
            <el-tab-pane label="任务信息" v-if="workInfo_view">
                <el-row>
                    <el-col :span="24"> 任务标题: {{ taskInfos.name }} </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8"> 年度: {{ targetYear }} </el-col>
                    <el-col :span="8">
                        任务属性:
                        <span v-if="taskInfos.type == 0">A类</span>
                        <span v-if="taskInfos.type == 1">B类</span>
                        <span v-if="taskInfos.type == 2">C类</span>
                    </el-col>
                    <el-col :span="8">
                        分配次级:
                        <span v-if="taskInfos.level == 0">一级</span>
                        <span v-if="taskInfos.level == 1">二级</span>
                        <span v-if="taskInfos.level == 2">三级</span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8"> 任务下发人: {{ taskInfos.allocUserId }} </el-col>
                    <el-col :span="8"> 任务下发部门: {{ taskInfos.allocDeptId }} </el-col>
                    <el-col :span="8"> 任务接受部门: {{ taskInfos.acceptDeptId }} </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        是否为学校专项考核:
                        <span v-if="taskInfos.isAssess == null">--</span>
                        <span v-if="taskInfos.isAssess == 1">是</span>
                        <span v-if="taskInfos.isAssess == 0">否</span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24"> 任务要求: {{ taskInfos.requirement }} </el-col>
                </el-row>
            </el-tab-pane>
            <el-tab-pane label="下发任务" v-if="allocatWork_view">
                <el-table :data="taskData" style="width: 100%" border>
                    <el-table-column prop="number" label="序号"> </el-table-column>
                    <el-table-column prop="name" label="任务标题"> </el-table-column>
                    <el-table-column prop="acceptDeptId" label="接受部门"> </el-table-column>
                    <el-table-column prop="type" label="任务属性">
                        <template slot-scope="scope">
                            <div v-if="scope.row.type == 0">A</div>
                            <div v-else-if="scope.row.type == 1">B</div>
                            <div v-else-if="scope.row.type == 2">C</div>
                            <div v-else></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="level" label="分配次级">
                        <template slot-scope="scope">
                            <div v-if="scope.row.level == 0">一级</div>
                            <div v-else-if="scope.row.level == 1">二级</div>
                            <div v-else-if="scope.row.level == 2">三级</div>
                            <div v-else></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="isAssess" label="学校年度专项考核">
                        <template slot-scope="scope">
                            <div v-if="scope.row.isAssess == 0">否</div>
                            <div v-else-if="scope.row.isAssess == 1">是</div>
                            <div v-else></div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="150">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" @click="getTaskById(scope.row.id)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="布置工作" v-if="issueWrok_view">
                <el-table :data="workData" style="width: 100%" border>
                    <el-table-column prop="number" label="序号"> </el-table-column>
                    <el-table-column prop="name" label="任务标题"> </el-table-column>
                    <el-table-column prop="managerId" label="负责人"> </el-table-column>
                    <el-table-column prop="helperIds" label="协助人"> </el-table-column>
                    <el-table-column prop="startTime" label="开始日期"> </el-table-column>
                    <el-table-column prop="endTime" label="完成日期"> </el-table-column>
                    <el-table-column prop="isAssess" label="属于学校专项考核工作">
                        <template slot-scope="scope">
                            <div v-if="scope.row.isAssess == 0">否</div>
                            <div v-else-if="scope.row.isAssess == 1">是</div>
                            <div v-else></div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="150">
                        <template slot-scope="scope">
                              <el-popover
                                title="工作要求"
                                width="200"
                                trigger="hover">
                                <div slot="">{{scope.row.requirement}}</div>
                            <el-button size="mini" type="primary"  slot="reference">查看</el-button>
                            </el-popover>
                            
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
        <el-dialog :visible.sync="level2DialogVisible" width="70%" append-to-body>
            <tab2
                :taskInfos="taskInfo"
                :targetYear="targetYear"
                :workInfo_view="workInfo_view"
                :allocatWork_view="allocatWork_view"
                :issueWrok_view="issueWrok_view"
            ></tab2>
            <span slot="footer" class="dialog-footer">
                <el-button type="warning" @click="level2DialogVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import moment from 'moment';
import workOfYearTargetApi from '../../../../api/workOfYearTargetApi';
import workApi from '../../../../api/work';
import tab2 from './TabBsearch2.vue';
export default {
    components: {
        tab2
    },
    props: {
        taskInfos: Object,
        // 年份名字
        targetYear: String,
        // 年份id
        // targetId: String,

        workInfo_view: {
            type: Boolean,
            default: true
        },
        allocatWork_view: {
            type: Boolean,
            default: true
        },
        issueWrok_view: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            level2DialogVisible: false,
            // 布置工作列表
            workData: [],
            // 下发任务列表
            taskData: [],
            teacherOptions: {},
            departmentOptions: {},
            departmentId: '',
            tempTeachers: [],
            tempDeparts: [],
            taskInfo: {}
        };
    },
    methods: {
        // 获取任务
        async getTaskById(id) {
            await workOfYearTargetApi.getWorkNameOfYearTargetById(id).then((res) => {
                console.log(res.data);
                this.taskInfo = res.data;
                this.$forceUpdate();
                this.level2DialogVisible = true;
            });
        },
        //获取老师姓名
        getTeachersAndDepartments() {
            this.$store.dispatch('getTeachers').then((res) => {
                this.tempTeachers = this.$store.state.teacher.teachers;
                for (let i = 0; i < this.tempTeachers.length; ++i) {
                    this.teacherOptions[i] = {
                        value: this.tempTeachers[i].id,
                        label: this.tempTeachers[i].name
                    };
                }
            });
            this.tempDeparts = this.$store.state.department.department;
            for (let j = 0; j < this.tempDeparts.length; ++j) {
                this.departmentOptions[j] = {
                    value: this.tempDeparts[j].id,
                    label: this.tempDeparts[j].name
                };
            }
            for (let n = 0; n < this.tempDeparts.length; ++n) {
                if (this.tempDeparts[n].name == this.taskInfos.acceptDeptId) {
                    this.departmentId = this.tempDeparts[n].id;
                }
            }
        },
        getList() {
            this.getTaskTwoLevelByAllocateId();
            this.getWorkByTaskId();
        },
        // 获取部门的下发任务列表
        async getTaskTwoLevelByAllocateId() {
            for (let n = 0; n < this.$store.state.department.department.length; ++n) {
                if (this.$store.state.department.department[n].name == this.taskInfos.acceptDeptId) {
                    this.departmentId = this.$store.state.department.department[n].id;
                }
            }
            console.log(this.departmentId);
            console.log(this.taskInfos.id);
            await workOfYearTargetApi.getTargetTwo(this.taskInfos.id, 0, this.departmentId).then((res) => {
                console.log(res);
                console.log('获取到了下发列表');
                this.taskData = res.data;
            });
        },
        // 获取当前部门下布置的工作
        async getWorkByTaskId() {
            console.log('id:' + this.taskInfos.id);
            await workApi.getWorkById(this.taskInfos.id).then((res) => {
                console.log(res);
                this.workData = res.data;

                for (let i = 0; i < res.data.length; ++i) {
                    this.workData[i].startTime = moment(this.workData[i].startTime).format('YYYY-MM-DD');
                    this.workData[i].endTime = moment(this.workData[i].endTime).format('YYYY-MM-DD');
                }
            });
        }
    },
    created() {},
    watch: {
        taskInfos() {
            this.getTeachersAndDepartments();
            this.getList();
        }
    }
};
</script>

<style scoped>
.main {
    color: #606266;
}
.el-row {
    margin-bottom: 10px;
}
</style>